<template>
  <div class="wraper">
    <div :key="weather.air" class="main">
      <div class="image" style="float: left;margin-top: 10px;">
        <img :src="this.imgUrl" style="width:30px;" alt="">
      </div>
      <div class="image" style="float: left;">
        <div class="wea">{{ weather.wea }} {{weather.tem2}}℃~{{weather.tem1}}℃</div>
        <div class="date">{{ weather.date }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Weather',
  data() {
    return {
      weather: {},
      imgUrl:''
    }
  },
  created() {
    this.initWeather()
  },
  methods: {
    getSevenDaysWeather() {
        const url = 'https://v0.yiketianqi.com/api?version=v61&appid=53913187&appsecret=zI4xg8Xn&cityid=101120201'
        return axios.get(url)
    },
    async initWeather() {
        const result = await this.getSevenDaysWeather();
        if (result) {
            this.weather = result.data;
            this.imgUrl = require('@/assets/image/'+ this.weather.wea_img + '.png');
        }
    }
  }
}
</script>
<style scoped>
    .wea{
       color: white;
       margin-right: 20px;
       margin-top: -10px;
       margin-left: 5px;
       font-size: 12px;
       height:20px
    }
    .date{
        color: white;
        margin-left: 10px;
        font-size: 12px
    }
</style>